<template>
    <div class="wrapper">
        <img class="wrapper__img" src="http://www.dell-lee.com/imgs/vue3/user.png" alt="">
        <div class="wrapper__input">
            <input 
            class="wrapper__input__content" 
            type="text" 
            placeholder="请输入用户名"
            v-model="username"
            />
        </div>
        <div class="wrapper__input">
            <input 
            type="password"
            class="wrapper__input__content"  
            placeholder="请输入密码"
            v-model="password"
            />
        </div>
         <div class="wrapper__input">
            <input 
            type="password"
            class="wrapper__input__content" 
            placeholder="确认密码"
            autocomplete="new-password"
            v-model="ensurement"
            />
        </div>
        <div class="wrapper__register-button" @click="handleRegister">注册</div>
        <div class="wrapper__register-link" @click="handleLoginClick">已有帐号去登录</div>
        <Toast v-if="show" :message="toastMessage"/>
    </div>
</template>

<script>
import {reactive ,toRefs} from 'vue'
import {useRouter} from 'vue-router'
import { post } from '../../utils/request'
import Toast, {useToastEffect} from '../../components/Toast'

//处理注册相关逻辑
const useRegisterEffect=(showToast)=>{
    const router =useRouter();
    const data=reactive({
        username:'',
        password:'',
        ensurement:''
    })

    const handleRegister = async() => {
        try{
            const {username,password,ensurement}=data;
            if(ensurement!=='' && password!=='' && ensurement!==''){
                const result=await post('/api/user/Register',{
                    username:data.username,
                    password:data.password,
                    ensurement:data.ensurement
                })
                if(result?.errno===0){
                    router.push({name: 'Home'})
                }else{
                    showToast('注册失败')
                } 
            }else{
                showToast('请输入正确的用户名和密码')
            }
        }catch(e){
            showToast('请求失败')
        } 
    }
    const {username, password,ensurement}=toRefs(data)
    return {username, password,ensurement, handleRegister}
}

//处理登录点击跳转
const userLoginEffect=()=>{
    const router=useRouter();
    const handleLoginClick=()=>{
        router.push({name:"Login"})
    }
    return {handleLoginClick}
}

export default {
    name: 'Register',
    components: {Toast},
    setup(){
        const {show, toastMessage, showToast}=useToastEffect();
        const {username, password,ensurement, handleRegister}=useRegisterEffect(showToast);
        const {handleLoginClick}=userLoginEffect();
        
        return {show, toastMessage,
                username, password,ensurement,
                handleRegister,handleLoginClick
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
.wrapper{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    &__img{
        display: block;
        margin: 0 auto .4rem;
        width: .66rem;
        height: .66rem;
    }
    &__input{
        height: .48rem;
        margin: 0 .4rem .16rem .4rem;
        padding: 0 .16rem;
        background: #f9f9f9;
        border: .01rem solid rgba(0, 0, 0, 0.10);
        border-radius: .06rem;
        &__content{
            margin-top: .12rem;
            line-height: .22rem;
            width: 100%;
            border: none;
            outline: none;
            background: none;
            font-size: .16rem;
            color: $content-notice-fontcolor;
            &::placeholder{
                color: $content-notice-fontcolor;
                letter-spacing: 0;
                line-height: .24rem;
            }
        }
    }
    &__register-button{
        line-height: .48rem;
        margin: .32rem .4rem .16rem .4rem ;
        background: $btn-bgColor;
        box-shadow: 0 .04rem .08rem rgba(0,145,255,0.32);
        border-radius: .04rem;
        color: $bgColor;
        font-size: .16rem;
        text-align: center;
    }
    &__register-link{
        text-align: center;
        font-size: .14rem;
        color: $content-notice-fontcolor;
    }
}
</style>